<template>
  <div ref="pieDom" style="width: 100%;height: 100%;"></div>
</template>

<script>
export default {
  data() {
    return {
      pieEcharts: '',
      pieOption: {},
      datas: [],
      hideColor: '#6f76ac',
    }
  },
  mounted() {

    this.pieEcharts = this.$echarts.init(this.$refs.pieDom)
    this.setPieOption()
    this.setPieEvents()
  },
  methods: {
    setPieOption() {
      this.pieOption = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
          },
        ],
      }
      // 渲染图表
      this.pieEcharts.setOption(this.pieOption)
    },
    /**
     * 设置图表的事件
     */
    setPieEvents() {

      /**
       * 鼠标图表时默认显示第一条
       */
      this.pieEcharts.on('mouseout', () => {
        this.pieEcharts.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0,
        })
      })
      // 监听窗口变化 - 只刷新最后一个图表
      window.onresize = () => {
        this.pieEcharts.resize()
      }

      // 监听窗口变化 - 多个图表同时刷新
      window.addEventListener('resize', () => {
        this.pieEcharts.resize()
      })
    },
  },
}
</script>

<style scoped></style>
